<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Intersection Observer Demo</title>
    <style>
      /* 基础样式设置 */
      body {
        margin: 0;
        padding: 0;
        font-family: Arial, sans-serif;
      }

      /* 内容容器样式 */
      .content {
        padding: 20px;
      }

      /* 区块样式 */
      .section {
        height: 300px;
        margin-bottom: 20px;
        background-color: #f0f0f0;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 24px;
      }

      /* 按钮容器样式，将被定位在文档高度的30%位置 */
      .button-container {
        /* 这个容器将被定位在文档高度的30%位置 */
        text-align: center;
        padding: 20px 0;
      }

      /* 按钮样式 */
      .action-button {
        padding: 12px 24px;
        background-color: #4caf50;
        color: white;
        border: none;
        border-radius: 4px;
        font-size: 16px;
        cursor: pointer;
        transition: all 0.3s ease; /* 添加过渡效果 */
      }

      /* 按钮悬停效果 */
      .action-button:hover {
        background-color: #45a049;
        transform: scale(1.05); /* 悬停时按钮略微放大 */
      }

      /* 固定位置按钮样式 */
      .fixed-button {
        position: fixed; /* 固定定位 */
        bottom: 50px; /* 距离底部50px */
        right: 20px; /* 距离右侧20px */
        z-index: 100; /* 确保按钮在其他元素上方 */
        display: none; /* 初始状态下隐藏 */
      }
    </style>
  </head>
  <body>
    <div class="content">
      <div class="section">Section 1</div>
      <div class="section">Section 2</div>

      <!-- 按钮容器，将被定位在文档高度的大约30%位置 -->
      <div class="button-container" id="buttonContainer">
        <button class="action-button" id="actionButton">Click Me</button>
      </div>

      <!-- 这是按钮的固定版本，当原始按钮不在视图中时显示 -->
      <button class="action-button fixed-button" id="fixedButton">
        Click Me
      </button>

      <div class="section">Section 3</div>
      <div class="section">Section 4</div>
      <div class="section">Section 5</div>
      <div class="section">Section 6</div>
      <div class="section">Section 7</div>
      <div class="section">Section 8</div>
    </div>

    <script>
      document.addEventListener('DOMContentLoaded', function () {
        // 获取按钮元素的引用
        const actionButton = document.getElementById('actionButton')
        const fixedButton = document.getElementById('fixedButton')
        const buttonContainer = document.getElementById('buttonContainer')

        // 将按钮容器定位在文档高度的30%位置
        function positionButtonContainer() {
          // 获取文档的实际高度（取最大值以确保兼容性）
          const documentHeight = Math.max(
            document.body.scrollHeight,
            document.body.offsetHeight,
            document.documentElement.clientHeight,
            document.documentElement.scrollHeight,
            document.documentElement.offsetHeight
          )

          // 计算文档高度的30%位置
          const targetPosition = documentHeight * 0.3

          // 获取按钮前面的区块的当前位置
          const section1Height = document.querySelector('.section').offsetHeight
          const section2Height =
            document.querySelectorAll('.section')[1].offsetHeight

          // 调整边距以将按钮定位在文档高度的大约30%位置
          const marginTop =
            targetPosition - (section1Height + section2Height + 20 * 2) // 减去前面区块的高度和它们的边距
          buttonContainer.style.marginTop = `${marginTop}px`
        }

        // 调用函数以定位按钮容器
        // positionButtonContainer(); // 注释掉了，当前未启用

        // 设置Intersection Observer（交叉观察器）
        const observer = new IntersectionObserver(
          entries => {
            // 我们只观察一个元素，所以可以使用entries[0]
            const entry = entries[0]

            if (entry.isIntersecting) {
              // 按钮在视口中可见
              console.log(entry)
              console.log(entry.isIntersecting)
              fixedButton.style.display = 'none' // 隐藏固定按钮
              console.log('按钮在视口中可见')
            } else {
              // 按钮不在视口中可见
              fixedButton.style.display = 'block' // 显示固定按钮
              console.log('按钮不在视口中可见')
              console.log(entry)
            }
          },
          {
            // 观察器的选项
            threshold: 0, // 只要有一部分元素不在视图中就触发
            rootMargin: '0px', // 无边距
          }
        )

        // 开始观察按钮
        observer.observe(buttonContainer)

        // 让两个按钮执行相同的操作
        function buttonAction() {
          alert('按钮被点击了！')
        }

        // 为两个按钮添加点击事件监听器
        actionButton.addEventListener('click', buttonAction)
        fixedButton.addEventListener('click', buttonAction)

        // 在窗口大小调整时调整按钮位置
        window.addEventListener('resize', positionButtonContainer)
      })
    </script>
  </body>
</html>
